<template>
  <div class="country_code">
    <div class="codes" @click="toggleShow">
      <div class="code-box">
        <!-- <span class="banner"><country-flag :country="tempCode" /></span> -->
        <span class="banner">+{{ codeNumber }}</span>
        <i
          :class="
            isShow
              ? 'el_icon el-icon-caret-top'
              : 'el_icon el-icon-caret-bottom'
          "
        />
      </div>
    </div>
    <!--列表展示-->
    <div class="code_list" ref="codeList" v-show="isShow">
      <div class="code_input">
        <el-input
          v-model="searchInputValue"
          :placeholder="$t('m.Login_Code_Dropdown')"
          :maxlength="32"
          clearable
          prefix-icon="el-icon-search"
          @clear="stopClick"
        />
      </div>
      <el-divider class="el_divider"></el-divider>
      <div class="disable">
        <div class="input_list_code_y">
          <div
            v-for="(item, index) in searchData"
            :key="index"
            class="input_list_code"
            @click="select(item)"
          >
            <div><country-flag :country="item.code" /></div>
            <div>+{{ item.codes }}</div>
            <div>{{ item.country }}</div>
          </div>
        </div>
        <div class="width:3px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import countries from '../common/json/countries.json'
import CountryFlag from 'vue-country-flag'
export default {
  name: 'country-code',
  components: {
    CountryFlag
  },
  props: {
    code: {
      type: [String, Number],
      default: ''
    },
    codeNumber: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      isShow: false,
      tempCode: this.$country.code,
      searchInputValue: '',
      userClick: false
    }
  },
  created () {
    this.dailyLeftTypeList = countries
  },
  mounted () {},
  beforeDestroy () {
    document.removeEventListener('click', this.checkClick)
  },
  watch: {
    isShow (newVal, oldVal) {
      // console.log('watch isShow', newVal, oldVal)
      if (newVal) {
        setTimeout(() => {
          document.addEventListener('click', this.checkClick)
        }, 0)
      } else {
        document.removeEventListener('click', this.checkClick)
      }
    },
    code (newVal, oldVal) {
      // console.log('watch code', newVal, oldVal)
      this.tempCode = newVal
    }
  },
  methods: {
    stopClick () {
      document.removeEventListener('click', this.checkClick)
      setTimeout(() => {
        document.addEventListener('click', this.checkClick)
      }, 0)
    },
    // 处理点击事件
    checkClick (e) {
      const res = this.isShow && !this.$refs.codeList.contains(e.target)
      // console.log('处理点击事件', res, e.target)
      if (res) {
        this.isShow = false
        document.removeEventListener('click', this.checkClick)
      }
    },
    // 切换显示
    toggleShow () {
      this.isShow = !this.isShow
    },
    // 选择项
    select (data) {
      this.isShow = false
      this.tempCode = data.code
      // 数据双休绑定
      // this.$emit('update:code', data.code)
      this.$emit('update:codeNumber', data.codes)
      // 触发选择事件
      this.$emit('select', data)
    },
    // 清除
    clear () {
      this.searchInputValue = ''
    }
  },
  computed: {
    searchData () {
      if (!this.searchInputValue) {
        // 如果不存在，所有国家整体返回
        return this.dailyLeftTypeList
      }
      let searchInputValue = this.searchInputValue.toLowerCase() // 大写转为小写
      // 根据条件过滤
      return this.dailyLeftTypeList.filter(item => {
        return Object.keys(item).some(key => {
          return (
            String(item[key])
              .toLowerCase()
              .indexOf(searchInputValue) > -1
          )
        })
      })
    }
  }
}
</script>

<style scoped>
.country_code {
  position: relative;
}

.codes div {
  height: 16px;
  line-height: 16px;
  float: left;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #39404d;
  line-height: 16px;
}
.codes img {
  width: 33px;
  height: 30px;
  float: left;
}
.code-box {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.banner {
  display: block;
  margin-top: -3px;
}
.el_icon {
  float: right;
  line-height: 16px;
  margin-left: 8px;
  font-size: 6px;
  color: #39404d;
}
.code_list {
  z-index: 9999;
  /* width: 368px;
  height: 274px; */
  width: 360px;
  height: 304px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: absolute;
  /* left: -40px; */
  left: -16px;
  top: 40px;
}
.code_input {
  height: 56px;
  line-height: 56px;
}
.code_input >>> .el-input__inner {
  width: 320px;
  height: 32px !important;
  /* background: #f7f7f9; */
  border-radius: 5px;
  line-height: 32px;
  margin-left: 24px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  border: 1px solid #e4e4e6 !important;
}
.code_input >>> .el-input__inner:focus {
  border: 1px solid var(--text-color) !important;
}
.code_input >>> .el-input__icon {
  font-size: 12px !important;
  height: 24px;
  line-height: 56px !important;
  padding-left: 26px;
}
.code_input >>> .el-input__suffix {
  font-size: 12px !important;
  height: 24px;
  line-height: 56px !important;
  padding-right: 40px;
  cursor: pointer;
}
.el_divider {
  margin: 0 !important;
}
.disable {
  display: flex;
}
.input_list_code_y {
  height: 247px;
  width: 357px;
  overflow-y: auto;
  z-index: 999;
}
.input_list_code {
  width: 357px;
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: start;
}
.input_list_code:hover {
  background: #f5f5f7;
}
.input_list_code div {
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: #39404d;
  line-height: 17px;
}
.input_list_code div:nth-child(1) {
  margin: -3px 8px 0 24px;
}
.input_list_code div:nth-child(2) {
  margin-right: 8px;
}
@media screen and (max-width: 448px) {
  .code_list {
    width: 310px;
  }
  .code_input >>> .el-input__inner {
    width: 262px;
  }
}

/* 整个滚动条 */
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 5px;
  /* 对应横向滚动条的宽度 */
  height: 0px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #e4e4e6;
  border-radius: 3px;
  height: 44px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #ffffff;
}
</style>
